<!Doctype html>
<html>

<head>
    <title>oixan的博客</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/blog.css">
</head>

<body>
    <div class="head">
        <div class="headnav">
            <div class="naveframe">
                <ul class="navlist">
                    <li>
                        <a href="../index.html">
                            主页
                        </a>
                    </li>
                    <li>
                        <a href="../bloglist.html">
                            博客
                        </a>
                    </li>
                    <li>
                        <a href="../about.html">
                            关于
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="headtext">
            <div class="headtext1">世界很简单，人类很复杂。</div>
            <div class="headtext2">浮生若梦，寻寻觅觅。</div>
        </div>
    </div>

    <div class="contents-all">
        <div class="contents">

            <div class="frame">
                <div class="title">
                    <h3>css3上下跳动特效</h3>
                </div>
                <div class="dtime">时间：2018-06-13</div>
                <div class="detail">

                    <style>
                        .ghost {
                            width: 160px;
                            margin: 100px auto;
                            position: relative;
                            animation: ghostUpdown 1s infinite alternate;
                            -webkit-animation: ghostUpdown 1s infinite alternate;
                        }

                        .ghostBody {
                            width: 140px;
                            height: 180px;
                            background: lightgray;
                            border-radius: 100% 100% 0 0;
                            position: relative;
                        }

                        .ghostEye {
                            width: 15px;
                            height: 20px;
                            border-radius: 100%;
                            border: 2px solid #061E74;
                            background: #061E74;
                            box-shadow: inset -2px -2px #fff;
                            position: absolute;
                            top: 60px;
                        }

                        .left {
                            left: 45px
                        }

                        .right {
                            right: 50px;
                        }

                        .ghostMouth {
                            width: 15px;
                            height: 20px;
                            border-radius: 100%;
                            border: 2px solid #061E74;
                            position: absolute;
                            top: 90px;
                            left: 70px;
                        }

                        .ghostWave {
                            position: absolute;
                            width: 140px;
                            height: 20px;
                            background-size: 25px 20px;
                            background-image: radial-gradient(circle at 50% 0%, #fff, 71%, transparent 71%);
                        }

                        .shadow {
                            width: 140px;
                            height: 10px;
                            border-radius: 100%;
                            background: #061E74;
                            opacity: 0.3;
                            margin-top: 70px;
                            animation: shadow 1s infinite alternate;
                            -webkit-animation: shadow 1s infinite alternate;
                        }

                        @keyframes ghostUpdown {
                            from {
                                margin-top: 100px;
                            }
                            to {
                                margin-top: 70px;
                            }
                        }

                        @-webkit-keyframes ghostUpdown {
                            from {
                                margin-top: 100px;
                            }
                            to {
                                margin-top: 70px;
                            }
                        }

                        @keyframes shadow {
                            from {
                                margin-top: 70px;
                                opacity: 0.3;
                            }
                            to {
                                margin-top: 100px;
                                opacity: 0.1;
                            }
                        }

                        @-webkit-keyframes shadow {
                            from {
                                margin-top: 70px;
                                opacity: 0.3;
                            }
                            to {
                                margin-top: 100px;
                                opacity: 0.1;
                            }
                        }
                    </style>
                    <p>css3上下跳动特效(转载)</p>
                    <div class="ghost">
                        <div class="ghostBody"></div>
                        <div class="ghostEye left"></div>
                        <div class="ghostEye right"></div>
                        <div class="ghostMouth"></div>
                        <div class="ghostWave"></div>
                        <div class="shadow"></div>
                    </div>

                </div>
                <a href="javascript:void(0)" onclick="showPg()">返回</a>
            </div>


        </div>
    </div>
    <div class="footer">
        <div class="footertext">©2018,oixan博客</div>
    </div>
    <span id="backtop" onclick="topFunction()">返回顶部</span>
</body>
<script  src="../js/fanhuiye.js"></script>
</html>